<template>

	<view class="content">
		<view class="poster-box y-f">
			<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
			<view class="share-box" v-if="poster.finalPath">
				<view class="share-list-box x-f flex_box flex_align align_c">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn flex_box flex_align flex_center" open-type="share">
						<image class="share-img" src="../../static/index/weixin.png" mode=""></image>
						<text class="share-title ml10 color_66 fs16">微信好友</text>
					</button>

					<!-- #endif -->
					<view class="flex_box flex_align share-btn flex_center" @tap="saveImage">
						<image class="share-img" src="../../static/index/saveimg.png" mode=""></image>
						<text class="share-title ml10 color_66 fs16">保存图片</text>
					</view>

				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="invite_poster" :style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
		</view>

	</view>
</template>

<script>
	import {
		getSharePoster
	} from '@/utils/QS-SharePoster/QS-SharePoster.js';
	export default {

		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'invite_poster',
				showShareGuide: false,
				username: '',
				avatar: '',
				uid: '',
				shareImage: '',
				mobile:''
			};
		},
		props: {},
		created() {
			let that = this;
			this.username = uni.getStorageSync("username");
			this.avatar = uni.getStorageSync("avatar");
			this.uid = uni.getStorageSync("id");
			this.mobile = uni.getStorageSync("mobile");
			this.getShare();
		
		},
		methods: {

			//转发
			onShareAppMessage(res) {

				return {
					path: "/pages/register/register?scene=" + this.mobile, //这是为了传参 onload(data){let id=data.id;}
					title: "我为百狮人力代言",
					imageUrl: "https://bs2021.oss-cn-hangzhou.aliyuncs.com/bs_logo.jpg"
				}
			},

			getShare() {
				console.info("====scene===="+this.mobile);
				let param = {
					scene: this.mobile,
					page: 'pages/register/register',
				}
				let that = this;
				this.$api.getShareInfo(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shareImage = res.data;
						that.shareFc();
					} else {

					}
				})
			},

			saveImage() {
				let that = this;
				let platform = uni.getStorageSync('platform');
				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success: res => {
						that.$util.$showToast('保存成功', '', 'none');

					},
					fail: err => {
						that.$util.$showToast('保存失败', '', 'none');
					}
				});
			},

			async shareFc() {
				try {
					// console.log('准备生成:' + new Date());
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						// type: 'invitePoster',
						backgroundImage: "https://ulife2021.oss-cn-shanghai.aliyuncs.com/usersharebg.png", //接口返回的背景图
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
								width: 1080,
								height: 1920,
								backgroundColor: '#666'
							}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.042;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									// {
									// 	type: 'custom',
									// 	setDraw(Context) {
									// 		Context.setFillStyle('black');
									// 		Context.setGlobalAlpha(1);
									// 		Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
									// 		Context.setGlobalAlpha(1);
									// 	}
									// },
									{
										type: 'image', //头像
										url: this.avatar,
										alpha: 1,
										dy: bgObj.width * 0.16,
										infoCallBack(imageInfo) {
											let scale = (bgObj.width * 0.16) / imageInfo.height;
											return {
												circleSet: {
													x: (imageInfo.width * scale) / 2,
													y: (bgObj.width * 0.16) / 2,
													r: (bgObj.width * 0.16) / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.16,
												dx: bgObj.width * 0.5 - imageInfo.width * 0.5 * scale

												/* roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													} */
											};
										}
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: this.username,
										size: fontSize,
										color: 'black',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.5 - textLength * 0.5,
												dy: bgObj.width * 0.42
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									// #ifdef MP-WEIXIN
									{
										type: 'image', //微信小程序码
										url: this.shareImage,
										alpha: 1,
										drawDelayTime: 500, //draw延时时间
										dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
										dy: bgObj.width * 0.855,
										infoCallBack(imageInfo) {
											return {
												dWidth: bgObj.width * 0.26,
												dHeight: bgObj.width * 0.26
												// roundRectSet: { // 圆角矩形
												// 	r: imageInfo.width * 0.025
												// }
											};
										}
									},
									// #endif
									// #ifndef  MP-WEIXIN
									{
										type: 'qrcode',
										text: that.shareInfo.path,
										size: bgObj.width * 0.26,
										dx: bgObj.width * 0.5 - (bgObj.width * 0.26) / 2,
										dy: bgObj.width * 0.855
									}
									// #endif
								]);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
					this.poster.finalPath = d.poster.tempFilePath;
					//this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
					this.qrShow = true;
				} catch (e) {
					console.log("==e===" + JSON.stringify(e));
				}
			},
		}
	}
</script>

<style lang="scss">
	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.content {
		position: relative;
		width: 100%;
		height: 1350rpx;
		button {margin: 0 ; padding: 0;background: transparent;border:none}
		button::after {
		  border: none
		}
	}
	.posterImage {
		width: 660rpx;
		margin: 30upx auto 0;
		display: block;
	}
	.share-list-box{width: 660rpx;margin: 80upx auto;}
	.share-btn{width: 50%;}
	.share-img {
		width: 70rpx;
		height: 70rpx;
		// background: rgba(246, 246, 254, 1);
		border-radius: 50%;
		vertical-align: middle;
	}
	
	
</style>
